<template>
    <div class="analysis-section-wrap">
        <flexbox justify="center">
            <div class="line line-left"></div>
            <div class="section-title">{{ title }}</div>
            <div class="line line-right"></div>
        </flexbox>
        <slot />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'AnalysisSection',
    props: {
        title: { type: String, default: '' }
    }
});
</script>
<style scoped lang="less">
.analysis-section-wrap {
    background: #fff;
}
.section-title {
    margin: 0 24px;
    font-size: 24px;
    color: #172b4d;
    font-weight: 500;
}
.line {
    display: inline-block;
    width: 72px;
    border-top: 2px solid #e9e9e9;
    position: relative;
}
.line-left {
    &::after {
        width: 8px;
        height: 8px;
        position: absolute;
        right: -8px;
        top: -5px;
        border-radius: 50%;
        background: #e9e9e9;
        content: '';
    }
}
.line-right {
    &::after {
        width: 8px;
        height: 8px;
        position: absolute;
        left: -8px;
        top: -5px;
        border-radius: 50%;
        background: #e9e9e9;
        content: '';
    }
}
</style>